<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="oastaglib" prefix="oas" %>
<html>
<head>

    <title>Online Attendance System</title>
    <link rel="stylesheet" type="text/css" href="<c:url value="/resources/bootstrap/dist/css/bootstrap.min.css" /> ">
    <script type="text/javascript" src="<c:url value="/resources/js/jquery/dist/jquery.min.js"/>"></script>
    <script type="text/javascript" src="<c:url value="/resources/bootstrap/dist/js/bootstrap.min.js"/>"></script>
</head>
<body style="background-color:#eeeeee">
<oas:nav/>
<oas:content>
    <div style="background-color:#ffffff;width:90%;margin:0 auto;padding:15px 10px;">
        <h1>员工管理</h1>
        <br/>
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addUser">
            增加员工
        </button>
        <!-- 员工列表  -->
        <br/><br/>
        <c:forEach items="${paginationSupport.items}" var="employee">
            <div class="card" style="margin-top: 10px">
                <div class="card-header">${employee.fullName}</div>
                <div class="card-body row">
                    <div class="col-11">
                        <div>id: <c:out value="${employee.id}"/></div>
                        <div>用户名: <c:out value="${employee.username}"/></div>
                        <div>部门: <c:out value="${employee.workcell.name}"/></div>
                        <div>邮箱: <c:out value="${employee.email}"/></div>
                        <div>电话: <c:out value="${employee.phone}"/></div>
                    </div>
                    <div class="col-1">
                        <c:if test="${sessionScope.user.id != employee.id}">
                            <a class="btn btn-sm btn-block btn-danger" href="<c:url value="/employee/delete/${employee.id}"/> ">删除</a>
                        </c:if>
                        <a class="btn btn-sm btn-block btn-info" href="<c:url value="/employee/details/${employee.id}" />">详情</a>
                        <a class="btn btn-sm btn-block btn-info" href="<c:url value="/employee/update/${employee.id}" />">修改</a>
                    </div>
                </div>
            </div>
        </c:forEach>
        <br/><br/>
        <div>
            每页${paginationSupport.pageSize}个员工， 第${paginationSupport.currentPageNo}/${paginationSupport.totalPageCount}页,共${paginationSupport.totalCount}个员工
            <ul class="pagination">
                <c:if test="${paginationSupport.previousPage}">
                    <li class="page-item">
                        <a class="page-link"
                           href="<c:url value="/employee?pageNo=${paginationSupport.currentPageNo-1}" />">上一页</a>
                    </li>
                </c:if>
                <c:forEach var="i" begin="1" end="${paginationSupport.totalPageCount}" step="1">
                    <li class="page-item">
                        <a class="page-link" href="<c:url value="/employee?pageNo=${i}" />"> ${i}</a>
                    </li>
                </c:forEach>
                <c:if test="${paginationSupport.nextPage}">
                    <li class="page-item">
                        <a class="page-link"
                           href="<c:url value="/employee?pageNo=${paginationSupport.currentPageNo+1}" />">下一页 </a>
                    </li>
                </c:if>
            </ul>
        </div>
    </div>
    <!-- 模态框 -->
    <div class="modal fade" id="addUser">
        <div class="modal-dialog">
            <div class="modal-content">
                <form action="<c:url value="/employee/add"/>" method="post">
                    <!-- 模态框头部 -->
                    <div class="modal-header">
                        <h4 class="modal-title">添加新员工</h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>

                    <!-- 模态框主体 -->
                    <div class="modal-body">
                        <label>
                            用户名：
                            <input class="form-control" type="text" name="username" required="required">
                        </label>
                        <label>
                            密码：
                            <input class="form-control" type="password" name="password" required="required">
                        </label>
                        <label>
                            全名：
                            <input class="form-control" type="text" name="fullName" required="required">
                        </label>
                        <label>
                            邮箱：
                            <input class="form-control" type="email" name="email" required="required">
                        </label>
                        <label>
                            电话：
                            <input class="form-control" type="tel" name="phoneNo" required="required">
                        </label>
                        <label>
                            年龄：
                            <input class="form-control" type="number" name="age" required="required">
                        </label>
                        <label>
                            工作部门：
                            <select class="form-control" name="workcell">
                                <c:forEach items="${sessionScope.user.workcell.childWorkcells}" var="workcell">
                                    <option value="${workcell.id}">
                                            ${workcell.name}
                                    </option>
                                </c:forEach>
                            </select>
                        </label><br/>
                        <label>
                            性别：
                            <select class="form-control" name="gender">
                                <option value="Male">男</option>
                                <option value="Female">女</option>
                            </select>
                        </label>
                        <label>
                            职位：
                            <select class="form-control" name="role">
                                <option value="User">员工</option>
                                <option value="Manager">管理员</option>
                            </select>
                        </label>
                    </div>

                    <!-- 模态框底部 -->
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">提交</button>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</oas:content>
<oas:footer></oas:footer>
</body>
</html>
